<template>
  <div class="xq-form-wrapper taxStyle page-miH page-bgBack pb24">
    <a-layout>
      <a-layout-sider style="flex: 0 0 310px; max-width: 310px; min-width: 310px; width: 310px">
        <div class="taxC-m-sider" :class="active == 'active' ? 'active-select ' : ''">
          <div class="mb12" v-if="$hasPermission('zhinengsuanshui:koujiaoyiwurenguanli:sousuo')">
            <a-input-search v-model="searchEnterprise" placeholder="请输入企业名称" @search="onSearchEnterprise" />
          </div>
          <div class="tree-title">
            <span class="organization-left-name" style="font-size: 16px; font-weight: 500; color: #000000">企业列表</span>
            <a-button
              type="link"
              icon="plus"
              style="padding-right: 0"
              v-if="$hasPermission('zhinengsuanshui:koujiaoyiwurenguanli:xinjianqiye')"
              @click="onAdd(true)"
            >
              新增企业
            </a-button>
          </div>
          <div class="tree-title" :class="active == 'active' ? 'active ' : ''" @click="reloadData">
            <img class="qiyeStyle" src="../../../assets/taxCalculate/qiye.png" alt="" /><span class="organization-left-name">{{
              selectName
            }}</span>
          </div>
          <a-tree
            show-icon
            default-expand-all
            :tree-data="dataList"
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :blockNode="true"
            :showIcon="true"
            @expand="onExpand"
            @select="onSelect"
          >
            <img slot="floder" src="../../../assets/icons/icon2.png" style="width: 15px; height: 15px" alt />
            <template slot="title" slot-scope="{ title }">
              <a-tooltip>
                <template slot="title">{{ title }}</template>
                <span>{{ title }}</span>
              </a-tooltip>
            </template>
          </a-tree>
        </div>
      </a-layout-sider>
      <a-layout class="mt16 pl24 pr24">
        <div class="mb16" style="font-weight: 500; font-size: 16px; color: #3c3d43">{{ name }}</div>
        <a-row type="flex" align="middle" justify="space-between">
          <a-col>
            <a-input-search
              allowClear
              v-if="$hasPermission('zhinengsuanshui:koujiaoyiwurenguanli:sousuo')"
              v-model="searchName"
              placeholder="统一社会信用代码/登记序号"
              style="width: 240px"
              @search="onSearch"
            />
          </a-col>
          <a-col v-if="$hasPermission('zhinengsuanshui:koujiaoyiwurenguanli:gengxinshuij')">
            <a-button type="primary" @click="onAdd(false)">更新税局信息</a-button>
          </a-col>
        </a-row>
        <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
          <XqTable
            :customize="FormJson['config']['table']['customize']"
            :scroll="{ x: columns.length * 150 }"
            :pagination="false"
            :dataSource="tableData"
            :columns="columns"
          >
            <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
              <span :key="index">{{ col.customTitle }}</span>
            </template>
            <!-- eslint-disable-next-line prettier/prettier -->
            <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
              <div v-if="col.dataIndex === 'gmtCreate'" :key="index">{{ text ? moment(text).format("YYYY-MM-DD HH:mm") : "--" }}</div>
              <div v-if="col.dataIndex === 'branchRecordSign'" :key="index">{{ text === "0" ? "否" : text === "1" ? "是" : "" }}</div>
              <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
            </template>
          </XqTable>
          <div class="xq-form-content-pagination">
            <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
            <a-pagination
              v-model="pageNo"
              :total="total"
              :show-size-changer="true"
              :show-quick-jumper="true"
              :page-size-options="['10', '20', '50', '100']"
              :page-size="pageSize"
              @change="onPageChange"
              @showSizeChange="onPageSizeChange"
            />
          </div>
        </a-spin>
      </a-layout>
    </a-layout>

    <add :visible.sync="visible" :type="addType" @upDate="upDate" />
    <!-- <editModel :visible.sync="visibleEdit" :dataJson="editJson" /> -->
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import add from "./component/add";
import { getCompaniesListAll, getCompanyAuthorities, findCompanyGroup } from "./api";
import moment from "moment";
const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});
export default {
  mixins: [curdMixin],
  components: {
    add
  },
  data() {
    return {
      name: "全部",
      visible: false,
      addType: true,
      editJson: {},
      searchName: "",
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      dataList: [],
      expandedKeys: [],
      autoExpandParent: true,
      active: "active",
      searchEnterprise: "",
      rotate: false,
      taxNo: null,
      taxCompanyId: null,
      selectName: ""
    };
  },
  created() {
    this.onGetCompaniesListAll();
    this.onGetCompanyAuthorities();
    this.findCompanyGroupFun();
  },
  methods: {
    findCompanyGroupFun() {
      findCompanyGroup().then((res) => {
        console.log(res);
        this.$store.commit("site/updateSelected", {
          selectName: res.data[0].name
        });
        this.selectName = res.data[0].name;
      });
    },
    moment,
    onSearch() {
      this.pageNo = 1;
      this.onGetCompanyAuthorities();
    },
    async onGetCompaniesListAll() {
      try {
        // this.spinning = true;
        const params = {
          name: this.searchEnterprise || null,
          // pageNo: this.pageNo,
          // pageSize: this.pageSize,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        };

        const { data } = await getCompaniesListAll(params);
        console.log(data);
        this.dataList = this.tree(data);
        // setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.dataList = [];
        // setTimeout(() => (this.spinning = false), 500);
      }
    },
    async onGetCompanyAuthorities() {
      try {
        this.spinning = true;
        const params = {
          selectName: this.searchName ? this.searchName : undefined,
          taxCompanyId: this.taxCompanyId,
          taxNo: this.taxNo,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        };
        const { data } = await getCompanyAuthorities(params);
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.tableData = [];
        this.total = 0;
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetCompanyAuthorities();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetCompanyAuthorities();
    },
    onSelect(selectedKeys, info) {
      // console.log(selectedKeys,info);
      if (info.selected) {
        this.pageNo = 1;
        this.searchName = "";
        this.active = "";
        this.name = info.selectedNodes[0].data.props.name;
        this.taxNo = info.selectedNodes[0].data.props.taxNo;
        this.taxCompanyId = info.selectedNodes[0].data.props.id;
        this.onGetCompanyAuthorities();
        this.active = "tree";
      }
    },
    tree(array, childKey, onlyLastChild) {
      if (!array) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        // item["slots"] = {
        //   icon: "floder"
        // };
        item["title"] = item.name;
      });
      return array;
    },
    onSearchEnterprise(depName) {
      this.searchParams = depName;
      this.onGetCompaniesListAll();
    },
    onExpand(expandedKeys) {
      console.log("expandedKeys", expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },

    refushIcon() {
      this.rotate = !this.rotate;
      this.getTreeList();
    },
    reloadData() {
      this.active = "active";
      this.name = "全部";
      this.taxNo = null;
      this.taxCompanyId = null;
      this.onGetCompanyAuthorities();
    },
    onAdd(v) {
      this.addType = v;
      this.visible = true;
    },
    upDate() {
      this.pageNo = 1;
      this.onGetCompaniesListAll();
      this.onGetCompanyAuthorities();
    }
  }
};
</script>

<style lang="scss">
.taxStyle {
  .ant-layout-sider {
    background: #fff;
  }
  .ant-layout-sider-children {
    border-right: 0px solid #e8e8e8;
  }
}
</style>
<style lang="scss" scoped>
.taxC-m-sider {
  height: 100%;
  padding: 16px 12px;
  border-right: 1px solid #e8e8e8;
  ::v-deep .ant-layout-sider {
    height: calc(100vh - 152px);
    background: #fff;
  }
  .qiyeStyle {
    width: 20px;
    height: 20px;
  }
  ::v-deep .ant-tree.ant-tree-block-node li .ant-tree-node-content-wrapper {
    width: 100%;
    height: 40px;
    padding: 8px 0 0 28px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  ::v-deep .ant-tree li {
    padding: 0 !important;
  }
  ::v-deep .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
    display: none;
  }
  ::v-deep .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background: var(--primary10) !important;
    color: var(--primary) !important;
  }
}
.active-select ::v-deep .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background: #fff !important;
  color: #55565d !important;
}

.tree-title {
  width: 100%;
  height: 40px;
  border-radius: 2px;
  color: #3c3d43;
  .organization-left-name {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 180px;
    white-space: nowrap;
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 500;
  }
  padding-left: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  position: relative;
}
.active {
  background: var(--primary10);
  color: var(--primary) !important;
}
.organization >>> .ant-tabs-ink-bar {
  background-color: var(--primary);
}

.plusBtn {
  text-align: center;
  margin-top: 24px;
}
.topOrganization {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ebeef5;
}

.positionAdd {
  position: relative;
  left: 46%;
  margin-top: 35vh;
  .note {
    font-size: 16px;
    margin: 15px 0;
  }
  button {
    height: 45px;
  }
}
</style>
